<!-- v-for指令练习 
  看一遍理论知识，然后直接做案例-->
<script setup>
  import {ref} from "vue"
  // 书架对象数据
  const bookList = ref([
    {id: 1, bookName: "三国演义", author: "罗贯中"},
    {id: 2, bookName: "红楼梦", author: "曹雪芹"},
    {id: 3, bookName: "西游记", author: "吴承恩"},
    {id: 4, bookName: "水浒传", author: "施耐庵"}
  ])
  // 删除
  const onDelete = (i) => {
    if(window.confirm("确认删除么？")) {
      bookList.value.splice(i, 1)
    }
  }
</script>

<template>
  <div class="shelf-box">
    <h3>小比特的书架</h3>
    <table>
      <tr v-for="item, index in bookList" :key="item.id">
        <td class="title">《{{ item.bookName }}》</td>
        <td>{{ item.author }}</td>
        <td><button @click="onDelete(index)">删 除</button></td>
      </tr>
    </table>
  </div>
</template>

<style>
  body {
    background-color: rgb(132, 151, 142);
  }
  .shelf-box {
    width: 400px;
    padding: 5px 12px;
    margin: 100px auto;
    border: solid 1px #ccc;
    border-radius: 4px;
    box-shadow: 2px 4px 4px 2px rgba(0, 0, 0, 0.5);
    background-color: #fff;
  }
  td {
    width: 100px;
    padding: 8px;
    border-bottom: 1px solid #ccc;
  }
  .title {
    width: 150px;
  }

</style>